import React, { useState, useEffect } from 'react';
import { Row, Spin, Col } from 'antd';
import EarlyWarning from './components/EarlyWarning';
import HrOverflow from './components/HrOverflow';
import { fetchPerspective } from '../service';

const Overview = ({ companyId }) => {
    const [data, setDate] = useState({
        companyPopleNum: 0,
        entryPopleNum: 0,
        lastCycleCompanyPopleNum: 0,
        leavePopleNum: 0,
        yearCompletedRecruiterNum: 0,
        yearPlanRecruiterNum: 0,
        warnList: []
    });
    const [spinning, setSpinning] = useState(false);
    const user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {};
    const fetchData = async () => {
        setSpinning(true);
        const params = {
            companyId: companyId || user.companyId
        };
        const response = await fetchPerspective(params);
        if (response && response.code === 10000) {
            setDate(response.data);
        }
        setSpinning(false);
    };

    useEffect(() => {
        fetchData();
    }, [companyId]);

    return (
        <Spin spinning={spinning}>
            <Row gutter={{ xs: 8, sm: 16, md: 16 }} style={{ marginBottom: 12 }}>
                <Col md={16} xs={24} sm={24}>
                    <HrOverflow data={data} />
                </Col>
                <Col md={8} xs={24} sm={24}>
                    <EarlyWarning data={data.warnList} />
                </Col>
            </Row>
        </Spin>
    );
};

export default Overview;
